<template>
  <div class="designer-management">
    <el-tabs v-model="activeTab">
      <!-- 资质审核与信息维护 -->
      <el-tab-pane label="资质审核与信息维护" name="qualification">
        <div class="filter-container">
          <el-form :inline="true" :model="qualificationQuery" class="demo-form-inline">
            <el-form-item label="设计师">
              <el-input v-model="qualificationQuery.designerName" placeholder="设计师姓名" />
            </el-form-item>
            <el-form-item label="资质类型">
              <el-select v-model="qualificationQuery.qualificationType" placeholder="请选择">
                <el-option label="学历证书" value="EDUCATION" />
                <el-option label="职业资格证书" value="PROFESSIONAL" />
                <el-option label="技能等级证书" value="SKILL" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="qualificationQuery.status" placeholder="请选择">
                <el-option label="待审核" :value="0" />
                <el-option label="已通过" :value="1" />
                <el-option label="已拒绝" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQualificationSearch">查询</el-button>
              <el-button @click="resetQualificationQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-table :data="qualificationList" border style="width: 100%">
          <el-table-column prop="designer.realName" label="设计师" />
          <el-table-column prop="qualificationType" label="资质类型">
            <template #default="scope">
              {{ getQualificationTypeName(scope.row.qualificationType) }}
            </template>
          </el-table-column>
          <el-table-column prop="certificateName" label="证书名称" />
          <el-table-column prop="issuingAuthority" label="发证机构" />
          <el-table-column prop="issueDate" label="发证日期" />
          <el-table-column prop="expiryDate" label="有效期" />
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusName(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button size="small" @click="handleQualificationView(scope.row)">查看</el-button>
              <el-button 
                v-if="scope.row.status === 0"
                size="small" 
                type="success" 
                @click="handleQualificationApprove(scope.row)"
              >通过</el-button>
              <el-button 
                v-if="scope.row.status === 0"
                size="small" 
                type="danger" 
                @click="handleQualificationReject(scope.row)"
              >拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-model:current-page="qualificationQuery.page"
          v-model:page-size="qualificationQuery.size"
          :total="qualificationTotal"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleQualificationSizeChange"
          @current-change="handleQualificationCurrentChange"
        />
      </el-tab-pane>

      <!-- 日程管理 -->
      <el-tab-pane label="日程管理" name="schedule">
        <div class="filter-container">
          <el-form :inline="true" :model="scheduleQuery" class="demo-form-inline">
            <el-form-item label="设计师">
              <el-input v-model="scheduleQuery.designerName" placeholder="设计师姓名" />
            </el-form-item>
            <el-form-item label="日程类型">
              <el-select v-model="scheduleQuery.scheduleType" placeholder="请选择">
                <el-option label="预约" value="APPOINTMENT" />
                <el-option label="会议" value="MEETING" />
                <el-option label="休息" value="REST" />
              </el-select>
            </el-form-item>
            <el-form-item label="日期范围">
              <el-date-picker
                v-model="scheduleQuery.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleScheduleSearch">查询</el-button>
              <el-button @click="resetScheduleQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-table :data="scheduleList" border style="width: 100%">
          <el-table-column prop="designer.realName" label="设计师" />
          <el-table-column prop="scheduleDate" label="日期" />
          <el-table-column prop="startTime" label="开始时间" />
          <el-table-column prop="endTime" label="结束时间" />
          <el-table-column prop="scheduleType" label="日程类型">
            <template #default="scope">
              {{ getScheduleTypeName(scope.row.scheduleType) }}
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusName(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" @click="handleScheduleView(scope.row)">查看</el-button>
              <el-button 
                v-if="scope.row.status === 0"
                size="small" 
                type="danger" 
                @click="handleScheduleCancel(scope.row)"
              >取消</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-model:current-page="scheduleQuery.page"
          v-model:page-size="scheduleQuery.size"
          :total="scheduleTotal"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleScheduleSizeChange"
          @current-change="handleScheduleCurrentChange"
        />
      </el-tab-pane>

      <!-- 服务质量监控与评价 -->
      <el-tab-pane label="服务质量监控与评价" name="review">
        <div class="filter-container">
          <el-form :inline="true" :model="reviewQuery" class="demo-form-inline">
            <el-form-item label="设计师">
              <el-input v-model="reviewQuery.designerName" placeholder="设计师姓名" />
            </el-form-item>
            <el-form-item label="评分">
              <el-select v-model="reviewQuery.rating" placeholder="请选择">
                <el-option label="5星" :value="5" />
                <el-option label="4星" :value="4" />
                <el-option label="3星" :value="3" />
                <el-option label="2星" :value="2" />
                <el-option label="1星" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="reviewQuery.status" placeholder="请选择">
                <el-option label="待审核" :value="0" />
                <el-option label="已通过" :value="1" />
                <el-option label="已拒绝" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleReviewSearch">查询</el-button>
              <el-button @click="resetReviewQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-table :data="reviewList" border style="width: 100%">
          <el-table-column prop="designer.realName" label="设计师" />
          <el-table-column prop="user.realName" label="用户" />
          <el-table-column prop="rating" label="评分">
            <template #default="scope">
              <el-rate
                :model-value="scope.row.rating || 0"
                disabled
              />
            </template>
          </el-table-column>
          <el-table-column prop="professionalRating" label="专业能力" />
          <el-table-column prop="serviceRating" label="服务态度" />
          <el-table-column prop="communicationRating" label="沟通能力" />
          <el-table-column prop="timelinessRating" label="时效性" />
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusName(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button size="small" @click="handleReviewView(scope.row)">查看</el-button>
              <el-button 
                v-if="scope.row.status === 0"
                size="small" 
                type="success" 
                @click="handleReviewApprove(scope.row)"
              >通过</el-button>
              <el-button 
                v-if="scope.row.status === 0"
                size="small" 
                type="danger" 
                @click="handleReviewReject(scope.row)"
              >拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-model:current-page="reviewQuery.page"
          v-model:page-size="reviewQuery.size"
          :total="reviewTotal"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleReviewSizeChange"
          @current-change="handleReviewCurrentChange"
        />
      </el-tab-pane>
    </el-tabs>

    <!-- 资质审核详情对话框 -->
    <el-dialog
      v-model="qualificationDialogVisible"
      title="资质审核详情"
      width="50%"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设计师">{{ currentQualification?.designer?.realName }}</el-descriptions-item>
        <el-descriptions-item label="资质类型">{{ getQualificationTypeName(currentQualification?.qualificationType) }}</el-descriptions-item>
        <el-descriptions-item label="证书名称">{{ currentQualification?.certificateName }}</el-descriptions-item>
        <el-descriptions-item label="证书编号">{{ currentQualification?.certificateNo }}</el-descriptions-item>
        <el-descriptions-item label="发证机构">{{ currentQualification?.issuingAuthority }}</el-descriptions-item>
        <el-descriptions-item label="发证日期">{{ currentQualification?.issueDate }}</el-descriptions-item>
        <el-descriptions-item label="有效期">{{ currentQualification?.expiryDate }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(currentQualification?.status)">
            {{ getStatusName(currentQualification?.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="证书图片" :span="2">
          <el-image
            v-if="currentQualification?.certificateImage"
            :src="currentQualification.certificateImage"
            :preview-src-list="[currentQualification.certificateImage]"
            fit="contain"
            style="width: 200px; height: 200px"
          />
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ currentQualification?.remark }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="qualificationDialogVisible = false">关闭</el-button>
          <el-button 
            v-if="currentQualification?.status === 0"
            type="success" 
            @click="handleQualificationApprove(currentQualification)"
          >通过</el-button>
          <el-button 
            v-if="currentQualification?.status === 0"
            type="danger" 
            @click="handleQualificationReject(currentQualification)"
          >拒绝</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 日程详情对话框 -->
    <el-dialog
      v-model="scheduleDialogVisible"
      title="日程详情"
      width="50%"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设计师">{{ currentSchedule?.designer?.realName }}</el-descriptions-item>
        <el-descriptions-item label="日期">{{ currentSchedule?.scheduleDate }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ currentSchedule?.startTime }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ currentSchedule?.endTime }}</el-descriptions-item>
        <el-descriptions-item label="日程类型">{{ getScheduleTypeName(currentSchedule?.scheduleType) }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(currentSchedule?.status)">
            {{ getStatusName(currentSchedule?.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="标题">{{ currentSchedule?.title }}</el-descriptions-item>
        <el-descriptions-item label="地点">{{ currentSchedule?.location }}</el-descriptions-item>
        <el-descriptions-item label="描述" :span="2">{{ currentSchedule?.description }}</el-descriptions-item>
        <el-descriptions-item label="关联订单" :span="2">
          <el-link 
            v-if="currentSchedule?.relatedOrder"
            type="primary"
            @click="handleOrderView(currentSchedule.relatedOrder)"
          >
            {{ currentSchedule.relatedOrder.orderNo }}
          </el-link>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="scheduleDialogVisible = false">关闭</el-button>
          <el-button 
            v-if="currentSchedule?.status === 0"
            type="danger" 
            @click="handleScheduleCancel(currentSchedule)"
          >取消日程</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 评价详情对话框 -->
    <el-dialog
      v-model="reviewDialogVisible"
      title="评价详情"
      width="50%"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设计师">{{ currentReview?.designer?.realName }}</el-descriptions-item>
        <el-descriptions-item label="用户">{{ currentReview?.user?.realName }}</el-descriptions-item>
        <el-descriptions-item label="订单号">
          <el-link 
            v-if="currentReview?.order"
            type="primary"
            @click="handleOrderView(currentReview.order)"
          >
            {{ currentReview.order.orderNo }}
          </el-link>
        </el-descriptions-item>
        <el-descriptions-item label="评分">
          <el-rate
            :model-value="currentReview?.rating || 0"
            disabled
          />
        </el-descriptions-item>
        <el-descriptions-item label="专业能力">{{ currentReview?.professionalRating }}</el-descriptions-item>
        <el-descriptions-item label="服务态度">{{ currentReview?.serviceRating }}</el-descriptions-item>
        <el-descriptions-item label="沟通能力">{{ currentReview?.communicationRating }}</el-descriptions-item>
        <el-descriptions-item label="时效性">{{ currentReview?.timelinessRating }}</el-descriptions-item>
        <el-descriptions-item label="评价内容" :span="2">{{ currentReview?.comment }}</el-descriptions-item>
        <el-descriptions-item label="评价图片" :span="2">
          <el-image
            v-if="currentReview?.images"
            :src="currentReview.images.split(',')[0]"
            :preview-src-list="currentReview.images.split(',')"
            fit="contain"
            style="width: 200px; height: 200px"
          />
        </el-descriptions-item>
        <el-descriptions-item label="设计师回复" :span="2">{{ currentReview?.replyContent }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(currentReview?.status)">
            {{ getStatusName(currentReview?.status) }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="reviewDialogVisible = false">关闭</el-button>
          <el-button 
            v-if="currentReview?.status === 0"
            type="success" 
            @click="handleReviewApprove(currentReview)"
          >通过</el-button>
          <el-button 
            v-if="currentReview?.status === 0"
            type="danger" 
            @click="handleReviewReject(currentReview)"
          >拒绝</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getQualificationList, approveQualification, rejectQualification } from '@/api/designer/qualification'
import { getScheduleList, cancelSchedule } from '@/api/designer/schedule'
import { getReviewList, approveReview, rejectReview } from '@/api/designer/review'

const activeTab = ref('qualification')

// 资质审核相关
const qualificationQuery = reactive({
  designerName: '',
  qualificationType: '',
  status: '',
  page: 1,
  size: 10
})
const qualificationList = ref([])
const qualificationTotal = ref(0)
const qualificationDialogVisible = ref(false)
const currentQualification = ref(null)

// 日程管理相关
const scheduleQuery = reactive({
  designerName: '',
  scheduleType: '',
  dateRange: [],
  page: 1,
  size: 10
})
const scheduleList = ref([])
const scheduleTotal = ref(0)
const scheduleDialogVisible = ref(false)
const currentSchedule = ref(null)

// 评价管理相关
const reviewQuery = reactive({
  designerName: '',
  rating: '',
  status: '',
  page: 1,
  size: 10
})
const reviewList = ref([])
const reviewTotal = ref(0)
const reviewDialogVisible = ref(false)
const currentReview = ref(null)

// 获取当前路由
const route = useRoute()

// 根据路由路径设置激活的tab
const setActiveTabFromRoute = () => {
  const path = route.path
  if (path.includes('/admin/designer/schedule')) {
    activeTab.value = 'schedule'
  } else if (path.includes('/admin/designer/review')) {
    activeTab.value = 'review'
  } else {
    activeTab.value = 'qualification'
  }
}

// 监听路由变化
watch(() => route.path, () => {
  setActiveTabFromRoute()
})

onMounted(() => {
  // 初始化时设置激活的tab
  setActiveTabFromRoute()
  fetchQualificationList()
  fetchScheduleList()
  fetchReviewList()
})

// 获取资质审核列表
const fetchQualificationList = async () => {
  try {
    const res = await getQualificationList(qualificationQuery)
    qualificationList.value = res.data.list
    qualificationTotal.value = res.data.total
  } catch (error) {
    ElMessage.error('获取资质审核列表失败')
  }
}

// 获取日程列表
const fetchScheduleList = async () => {
  try {
    const res = await getScheduleList(scheduleQuery)
    scheduleList.value = res.data.list
    scheduleTotal.value = res.data.total
  } catch (error) {
    ElMessage.error('获取日程列表失败')
  }
}

// 获取评价列表
const fetchReviewList = async () => {
  try {
    const res = await getReviewList(reviewQuery)
    reviewList.value = res.data.list
    reviewTotal.value = res.data.total
  } catch (error) {
    ElMessage.error('获取评价列表失败')
  }
}

// 资质审核相关方法
const handleQualificationSearch = () => {
  qualificationQuery.page = 1
  fetchQualificationList()
}

const resetQualificationQuery = () => {
  Object.assign(qualificationQuery, {
    designerName: '',
    qualificationType: '',
    status: '',
    page: 1,
    size: 10
  })
  fetchQualificationList()
}

const handleQualificationView = (row) => {
  currentQualification.value = row
  qualificationDialogVisible.value = true
}

const handleQualificationApprove = async (row) => {
  try {
    await ElMessageBox.confirm('确认通过该资质审核？', '提示', {
      type: 'warning'
    })
    await approveQualification(row.id)
    ElMessage.success('操作成功')
    qualificationDialogVisible.value = false
    fetchQualificationList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作失败')
    }
  }
}

const handleQualificationReject = async (row) => {
  try {
    await ElMessageBox.confirm('确认拒绝该资质审核？', '提示', {
      type: 'warning'
    })
    await rejectQualification(row.id)
    ElMessage.success('操作成功')
    qualificationDialogVisible.value = false
    fetchQualificationList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作失败')
    }
  }
}

// 日程管理相关方法
const handleScheduleSearch = () => {
  scheduleQuery.page = 1
  fetchScheduleList()
}

const resetScheduleQuery = () => {
  Object.assign(scheduleQuery, {
    designerName: '',
    scheduleType: '',
    dateRange: [],
    page: 1,
    size: 10
  })
  fetchScheduleList()
}

const handleScheduleView = (row) => {
  currentSchedule.value = row
  scheduleDialogVisible.value = true
}

const handleScheduleCancel = async (row) => {
  try {
    await ElMessageBox.confirm('确认取消该日程？', '提示', {
      type: 'warning'
    })
    await cancelSchedule(row.id)
    ElMessage.success('操作成功')
    scheduleDialogVisible.value = false
    fetchScheduleList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作失败')
    }
  }
}

// 评价管理相关方法
const handleReviewSearch = () => {
  reviewQuery.page = 1
  fetchReviewList()
}

const resetReviewQuery = () => {
  Object.assign(reviewQuery, {
    designerName: '',
    rating: '',
    status: '',
    page: 1,
    size: 10
  })
  fetchReviewList()
}

const handleReviewView = (row) => {
  currentReview.value = row
  reviewDialogVisible.value = true
}

const handleReviewApprove = async (row) => {
  try {
    await ElMessageBox.confirm('确认通过该评价？', '提示', {
      type: 'warning'
    })
    await approveReview(row.id)
    ElMessage.success('操作成功')
    reviewDialogVisible.value = false
    fetchReviewList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作失败')
    }
  }
}

const handleReviewReject = async (row) => {
  try {
    await ElMessageBox.confirm('确认拒绝该评价？', '提示', {
      type: 'warning'
    })
    await rejectReview(row.id)
    ElMessage.success('操作成功')
    reviewDialogVisible.value = false
    fetchReviewList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作失败')
    }
  }
}

// 分页相关方法
const handleQualificationSizeChange = (val) => {
  qualificationQuery.size = val
  fetchQualificationList()
}

const handleQualificationCurrentChange = (val) => {
  qualificationQuery.page = val
  fetchQualificationList()
}

const handleScheduleSizeChange = (val) => {
  scheduleQuery.size = val
  fetchScheduleList()
}

const handleScheduleCurrentChange = (val) => {
  scheduleQuery.page = val
  fetchScheduleList()
}

const handleReviewSizeChange = (val) => {
  reviewQuery.size = val
  fetchReviewList()
}

const handleReviewCurrentChange = (val) => {
  reviewQuery.page = val
  fetchReviewList()
}

// 工具方法
const getQualificationTypeName = (type) => {
  const map = {
    'EDUCATION': '学历证书',
    'PROFESSIONAL': '职业资格证书',
    'SKILL': '技能等级证书'
  }
  return map[type] || type
}

const getScheduleTypeName = (type) => {
  const map = {
    'APPOINTMENT': '预约',
    'MEETING': '会议',
    'REST': '休息'
  }
  return map[type] || type
}

const getStatusType = (status) => {
  const map = {
    0: 'warning',
    1: 'success',
    2: 'danger'
  }
  return map[status] || 'info'
}

const getStatusName = (status) => {
  const map = {
    0: '待审核',
    1: '已通过',
    2: '已拒绝'
  }
  return map[status] || '未知'
}
</script>

<style scoped>
.designer-management {
  padding: 20px;
}
.filter-container {
  margin-bottom: 20px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 